/**
 * 学习目标：条件渲染 - 三种方式
 *
 * 2. 三元运算符
 *
 */

import React from 'react';
import ReactDOM from 'react-dom';

// 1. if else语句配合函数的返回值
function loadData() {
  if (isLoading) {
    return <h1>加载中</h1>;
  } else {
    return <h2>正常显示</h2>;
  }
}

const isLoading = true;

const divNode = (
  <>
    {loadData()}

    {/* 2. 通过三元表达式 */}
    {isLoading ? <h1>加载中</h1> : <h2>正常显示</h2>}

    {/* 3. 逻辑且运算符 */}
    {isLoading && <h1>加载中</h1>}
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
